x<template>
  <div class="batdetail">
    <wxc-minibar title="合买详情">
      <!-- <image slot="left" style="height: 32px;width: 32px;" src="http://zhongcai-test.oss-cn-beijing.aliyuncs.com/hch5/back.png"></image>
      <text style="font-family: PingFangSC-Medium;font-size: 34px;color: #333333;" slot="middle">合买详情</text> -->
      <image slot="right" style="height: 32px;width: 32px;" src="http://zhongcai-test.oss-cn-beijing.aliyuncs.com/hch5/sharewhite.png"></image>
    </wxc-minibar>
    <scroller class="scroller" style="position:fixed;top:100px;bottom:100px;left:0;right:0;background-color: #F5F5F5;">
      <div class="scheme_title">
        <text style="font-family: PingFangSC-Medium;font-size: 28px;color: #666666;font-weight:bold">方案信息</text>
      </div>
      <div class="batdetail_desc" v-if="currentOrder !== null">
        <div class="batdetail_desc_fl">
          <div class="batdetail_desc_fl_item">
            <text style="font-size: 24px;color: #333333;">方案编号：</text>
            <text style="font-size: 24px;color: #333333;">{{currentOrder.schemeNo}}</text>
          </div>
          <div class="batdetail_desc_fl_item">
            <text style="font-size: 24px;color: #333333;">彩种：</text>
            <text style="font-size: 24px;color: #333333;">{{currentOrder.lotteryName}}</text>
          </div>
          <div class="batdetail_desc_fl_item">
            <text style="font-size: 24px;color: #333333;">总金额：</text>
            <text style="font-size: 24px;color: #333333;">{{currentOrder.money}}元</text>
          </div>
          <div class="batdetail_desc_fl_item">
            <text style="font-size: 24px;color: #333333;">盈利佣金：</text>
            <text style="font-size: 24px;color: #333333;">{{(currentOrder.remuneration*1).toFixed(2)}}%</text>
          </div>
          <div class="batdetail_desc_fl_item">
            <text style="font-size: 24px;color: #333333;">发起人：</text>
            <text style="font-size: 24px;color: #333333;">{{currentOrder.nickName}}</text>
          </div>
        </div>
        <div class="batdetail_desc_fr">
          <div class="batdetail_desc_fr_item">
            <text style="font-size: 24px;color: #333333;">合买用户：</text>
            <text style="font-size: 24px;color: #076BF2;line-height: 33px;">{{currentOrder.spartinCount}}</text>
            <text style="font-size: 24px;color: #333333;">人已参与跟单</text>
          </div>
          <div class="batdetail_desc_fr_item">
            <text style="font-size: 24px;color: #333333;">进度：</text>
              
            <text style="font-size: 24px;color: #333333;">{{(currentOrder.buyMoney/currentOrder.money *100).toFixed(2)}}%</text>
          </div>
          <div class="batdetail_desc_fr_item">
            <text style="font-size: 24px;color: #333333;">保底：</text>
            <text style="font-size: 24px;color: #333333;">{{ (+currentOrder.safeguardMoney).toFixed(2) }}元</text>
          </div>
        </div>
      </div>
      <!-- 表格布局 -->
      <!-- 大乐透 -->
      <superLottotable v-if="currentLottoId === '2'&&orderGroup.arr.length" :orderGroup="orderGroup"></superLottotable>
      <!-- 双色球 -->
      <unionLottotable v-if="currentLottoId === '1'&&orderGroup.arr.length" :orderGroup="orderGroup"></unionLottotable>
      <!-- 排三 -->
      <paiThreetable v-if="currentLottoId === '4'&&orderGroup.arr.length" :orderGroup="orderGroup"></paiThreetable>
      <!-- 排五 -->
      <paiFivetable  v-if="currentLottoId === '5'&&orderGroup.arr.length" :orderGroup="orderGroup"></paiFivetable>
      <!-- 福彩3d -->
      <lotto3Dtable v-if="currentLottoId === '3'&&orderGroup.arr.length" :orderGroup="orderGroup"></lotto3Dtable>
      <!-- 表格布局结束 -->
      <!-- 开奖信息折叠栏开始 -->
      <div class="scheme_message" v-if="currentOrder !== null">
        <text style="font-family: PingFangSC-Medium;font-size: 28px;color: #666666;margin-bottom:32px;font-weight:bold">方案宣言</text>
         <text style="font-size: 28px;color: #999999;margin-bottom:24px;">标题：{{currentOrder.title}}</text>
        <text style="font-size: 28px;color: #999999;margin-bottom:24px;">描述：{{currentOrder.describetion}}</text>
      </div>
      <!-- 开奖信息折叠栏结束 -->
    </scroller>
    <div class="bottombutton">
      <div class="buyform">
        <div  class="buyformtext">
          <text class="buyformtext_t">我要参与</text>
        </div>
        <div class="buyformtext">
          <input class="buyformtext_input"  @focus="focusone()" v-model="buynum" type="number" :placeholder="buynum">
        </div>
        <div  class="buyformtext">
          <text class="buyformtext_t">元</text>
        </div>
      </div>
      <wxc-button :text="submitBtnText" :disabled="btnDisabled" :btnStyle="btnStyle" @wxcButtonClicked="buyNow"></wxc-button>
    </div>
    <loading-big v-if="loadingshow"></loading-big>
     <!-- <wxc-loadingsp :show="loadingshow" type="custom" :need-mask="true" loading-text="加载中..." m-url="http://img.alicdn.com/tfs/TB1Ep_9NVXXXXb8XVXXXXXXXXXX-74-74.gif" m-width="200" m-height="200" m-backgroundcolor="#212021" m-textcolor="#ffffff">
    </wxc-loadingsp> -->
  </div>
</template>

<script>
import {  Utils, WxcButton } from "weex-ui";

  import WxcMinibar from "@/components/modules/wxc-minibar/index.js";
import WxcLoadingsp from "../../components/modules/loading";
import superLottotable from "../../components/modules/chipTable/super-lotto";
import unionLottotable from "../../components/modules/chipTable/union-lotto";
import paiThreetable from "../../components/modules/chipTable/pai-three";
import paiFivetable from "../../components/modules/chipTable/pai-five";
import lotto3Dtable from "../../components/modules/chipTable/lotto3d";
import loadingBig from "@/components/modules/loading-big";
const modal = weex.requireModule("modal");
var sxglobalEvent = weex.requireModule("globalEvent");
import { serialize, getBaseUrl, jsonAnalysis } from "@/utils/index.js";
const navigator = weex.requireModule("navigator");
import goucai from "../../js/components/module.js";
import { recentBuyGroup } from "@/js/global/index_data"
import {
  postResponse,
  postResponses,
  getResponse,
  getResponseToken,
  postResponsesToken,
  testapi
} from "@/api.js";
export default {
  data() {
    return {
      currentLottoId: "1",
      loadingshow: false,
      buynum: "最少0元",
      submitBtnText: "购买",
      btnDisabled: false,
      btnStyle: {
        backgroundColor: "#E70D0D",
        width: "180px",
        height: "100px",
        borderRadius: "0px"
      },
      //
      currentOrder: null,
      orderGroup: {
        mut: 2,
        arr: []
      },
      //
      money: "",
      status: null,
      multiple: "",
      schemeId: "",
      lottoId: "",
      perids: "",
      schemeNumberUnit: "",
      waitlottery: false,
      statusDescribe: "",
      batdetaillist: [],
      tablelist: [],
      lotterylist: []
    };
  },
  created() {},
  components: {
    WxcMinibar,
    WxcButton,
    WxcLoadingsp,
    superLottotable,
    unionLottotable,
    paiThreetable,
    paiFivetable,
    lotto3Dtable,
    loadingBig
  },
  methods: {
    focusone() {
      if (this.buynum.indexOf("最少") >= 0) {
        this.buynum = "";
      }
    },
    async buyNow() {
      this.focusone();
      if (this.buynum <= 0 || this.buynum.indexOf("最少") >= 0) {
        return modal.alert({ message: "请输入大于零的数字" });
      }
      if (this.buynum < Number(this.currentOrder.minParticipant)) {
        return modal.alert({
          message: `最少跟单${this.currentOrder.minParticipant}元`
        });
      }
      if (this.buynum > this.currentOrder.remaining) {
        return modal.alert({
          message: `剩余金额${(this.currentOrder.remaining)}元`
        });
      }
      if (this.buynum.toString().indexOf(".") >= 0) {
        return modal.alert({ message: `不可输入小数` });
      }

      if(this.currentOrder.money - this.currentOrder.buyMoney < this.buynum ) {
        return modal.alert({
          message: `剩余金额${(this.currentOrder.money - this.currentOrder.buyMoney)}元`
        });
      }
	  // this.loadingshow = true;
	  
      let reqBody = {
        schemeNo: this.currentOrder.schemeNo,
        money: this.buynum.toString()
      };
     
    //   try {
    //     let req = await postResponsesToken('order/bet/joinTogether', reqBody);

    //     this.loadingshow = false;
    //     let order = req.data;
        let baseurl = getBaseUrl(weex.config.bundleUrl, true);
        let hash = {
          // order: order,
          type:'ParticipateChipped',
          totalmoney: this.buynum,
          lottotype: `${this.currentOrder.title}-跟单`,
          lottoId: Number(this.currentLottoId),
          schemeNo: this.currentOrder.schemeNo,
          money: this.buynum.toString(),
          lotteryNo: recentBuyGroup.filter((value)=> value.typeName == this.currentOrder.lotteryNo )[0].typeName
        }       


        // let jUrl = baseurl + `views/pay/pay.js?` + serialize(hash);
        var params = {
          url: baseurl + `views/pay/pay.js?` + serialize(hash),
          animated: "true"
        };
        navigator.push(params);
    //   } catch (e) {
    //     this.loadingshow = false;
    //     modal.toast({ message: e });
    //   }
    },
    formatNum(num) {
      if (num < 10) return "0" + num;
      return num.toString();
    },
    tabactive(val, index) {
      val.status = !val.status;
      this.$set(this.lotterylist[index], "status", val.status);
    },
    getUrlParam() {
      let url = decodeURI(weex.config.bundleUrl);
      let query1 = jsonAnalysis(url.split("?")[1]);
      let data = JSON.parse(query1.data);

      this.currentOrder = data;

      this.currentLottoId = String(recentBuyGroup.filter((value)=> value.typeName == this.currentOrder.lotteryNo )[0].Id)

      this.currentOrder.lotteryName = this.currentOrder.lotteryName;
      this.buynum = "最少" + this.currentOrder.minParticipant + "元";
      this.orderGroup.mut = this.currentOrder.multiple;
      if (data.betContent) {
        let betcontent = JSON.parse(data.betContent);
        betcontent.map(x => {
          x.numberType = goucai.lottoSwitchNumberType(x.numberType);
        });
        this.orderGroup.arr = betcontent;
      }

    }
  },
  mounted() {
    this.getUrlParam();
  },
  computed: {}
};
</script>

<style scoped>
.buyformtext_input {
  height: 64px;
  width: 174px;
  border-top-color: rgb(209, 209, 209);
  border-top-style: solid;
  border-top-width: 1px;
  border-right-color: rgb(209, 209, 209);
  border-right-style: solid;
  border-right-width: 1px;
  border-bottom-color: rgb(209, 209, 209);
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-left-color: rgb(209, 209, 209);
  border-left-style: solid;
  border-left-width: 1px;
  font-size: 28px;
  border-radius: 4px;
  padding-top: 0px;
  padding-right: 5px;
  padding-bottom: 0px;
  padding-left: 5px;
}
.buyformtext_t {
  font-size: 28px;
  color: #333;
}
.buyformtext {
  flex: 1;
  align-items: center;
  justify-content: center;
}
.buyform {
  flex-direction: row;
  width: 570px;
}

.batdetail {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgb(245, 245, 245);
}
.bottombutton {
  position: fixed;
  bottom: 0;
  left: 0;
  height: 96px;
  width: 750px;
  display: flex;
  flex-direction: row;
  background-color: #fff;
}
.scheme_title {
  margin-left: 32px;
  margin-top: 24px;
  margin-bottom: 24px;
}
.bottombutton_item {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
.batdetail_desc_fl_item {
  margin-left: 32px;
  margin-bottom: 24px;
  flex-direction: row;
  align-items: center;
}
.batdetail_desc_fr_item {
  margin-left:52px;
  margin-bottom: 24px;
  flex-direction: row;
  align-items: center;
}
.lottery_img {
  position: absolute;
  width: 200px;
  height: 129px;
  top: -60px;
  right: 80px;
}
.batdetail_desc {
  padding-top: 32px;
  display: flex;
  flex-direction: row;
  background-color: #ffffff;
  border-radius: 4px;
}
.batdetail_desc_fl {
  flex: 1;
}
.batdetail_desc_fr {
  flex: 1;
}
.scheme_message {
  width: 750px;
  padding-top: 32px;
  padding-left: 30px;
  padding-right: 30px;
  padding-bottom: 104px;
}
.number {
  padding-left: 72px;
  padding-right: 72px;
}
.batdetail_lotteryinfo {
  margin-top: 24px;
}
.showtab {
  width: 750px;
  height: 88px;
  align-items: center;
  position: relative;
  display: flex;
  justify-content: space-between;
  flex-direction: row;
}
.arrowposition {
  position: absolute;
  top: 50%;
  margin-top: -12px;
  right: 32px;
}
.arrowposition1 {
  position: absolute;
  top: 50%;
  margin-top: -24px;
  right: 32px;
}
.showcontent {
  box-shadow: 4px 0 0 15px rgba(229, 229, 229, 0.5);
  margin-top: 2px;
}
.showtabcontent_fl {
  margin-left: 32px;
  display: flex;
  flex-direction: row;
}
.showtabcontent_fr {
  margin-right: 32px;
}
.backgroud0 {
  background-color: rgba(229, 229, 229, 0.5);
}
.backgroud1 {
  background-color: #fff3f3;
}
.backgroud2 {
  background-color: white;
}
.bGroup {
  padding: 24px 0 32px 0;
  display: flex;
  justify-content: space-between;
  flex-direction: row;
}
.forward {
  color: #333333;
  font-size: 32px;
  font-family: PingFangSC-Medium;
  height: 64px;
  line-height: 64px;
  width: 64px;
  border-radius: 50%;
  display: flex;
  text-align: center;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  border-width: 1px;
  border-style: solid;
  border-color: #a7a7a7;
}
.backward {
  font-family: PingFangSC-Medium;
  font-size: 32px;
  height: 64px;
  line-height: 64px;
  width: 64px;
  border-radius: 50%;
  display: flex;
  text-align: center;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-width: 1px;
  border-style: solid;
  border-color: #1c5aaf;
  color: #076bf2;
}
.lottery_money {
  height: 96px;
  margin-top: 32px;
  margin-left: 32px;
  margin-right: 32px;
  border-style: solid;
  border-color: #666666;
  border-top-width: 1px;
  border-left-width: 1px;
  border-right-width: 1px;
  justify-content: center;
  align-items: center;
  display: flex;
  flex-direction: row;
}
.lottery_thead {
  height: 60px;
  margin-left: 32px;
  margin-right: 32px;
  border-width: 1px;
  border-style: solid;
  border-color: #666666;
  border-bottom-width: none;
  justify-content: space-between;
  align-items: center;
  display: flex;
  flex-direction: row;
  margin-bottom: 32px;
}
.lottery_tbody {
  margin-bottom: 32px;
  margin-left: 32px;
  margin-right: 32px;
  justify-content: space-between;
  align-items: center;
  display: flex;
  flex-direction: row;
}
.lottery_total {
  height: 64px;
  margin-left: 32px;
  margin-right: 32px;
  border-width: 1px;
  border-style: solid;
  border-color: #666666;
  border-bottom-width: none;
  justify-content: space-between;
  align-items: center;
  display: flex;
  flex-direction: row;
  margin-bottom: 32px;
}
.batdetail_table {
  background-color: white;
  border-radius: 4px;
  padding-top: 24px;
  margin-bottom: 24px;
}
.batdetail_lotteryinfo_title {
  align-items: center;
}
.lottery_thead_item {
  width: 150px;
  justify-content: center;
  align-items: center;
}
.lottery_thead_item1 {
  width: 200px;
  justify-content: center;
  align-items: center;
}
.nozhongjiang {
  margin-left: 72px;
  margin-bottom: 48px;
}
.table {
  padding-left: 32px;
  padding-right: 32px;
  padding-bottom: 24px;
}
.table_tr {
  display: flex;
  align-content: stretch;
}
.table_head {
  width: 686px;
  height: 66px;
  background-color: #ebebeb;
  display: flex;
  flex-direction: row;
}
.table_tht {
  width: 83px;
  align-items: center;
  justify-content: center;
}
.table_thtt {
  width: 237px;
  align-items: center;
  justify-content: center;
}
.table_thttt {
  width: 155px;
  align-items: center;
  justify-content: center;
}
.table_thtttt {
  width: 110px;
  align-items: center;
  justify-content: center;
}
.table_thttttt {
  width: 95px;
  align-items: center;
  justify-content: center;
}
.table_trt {
  border-left-width: 1px;
  border-left-style: solid;
  border-left-color: #ebebeb;
  padding-top: 13px;
  padding-bottom: 13px;
  width: 83px;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #ebebeb;
  border-right-width: 1px;
  border-right-style: solid;
  border-right-color: #ebebeb;
  align-items: center;
  justify-content: center;
}
.table_trtt {
  padding-top: 13px;
  padding-bottom: 13px;
  width: 237px;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #ebebeb;
  border-right-width: 1px;
  border-right-style: solid;
  border-right-color: #ebebeb;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
.table_trttt {
  padding-top: 13px;
  padding-bottom: 13px;
  width: 155px;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #ebebeb;
  border-right-width: 1px;
  border-right-style: solid;
  border-right-color: #ebebeb;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
.table_trtttt {
  padding-top: 13px;
  padding-bottom: 13px;
  width: 110px;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #ebebeb;
  border-right-width: 1px;
  border-right-style: solid;
  border-right-color: #ebebeb;
  align-items: center;
  justify-content: center;
}
.batdetail_table_title {
  /* // margin-top: 32px;
  // margin-bottom: 24px;
  // margin-left:32px;
  //   background-color: rgb(245, 245, 245);
  //   justify-content: center;
  //   align-items: center; */
}
.table_body {
  width: 686px;
  display: flex;
  flex-direction: row;
  align-content: stretch;
}
.table_tr {
  width: 590px;
  display: flex;
  flex-direction: row;
}
.table_tr_left {
  width: 590px;
}
.table_tr_right {
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #ebebeb;
  border-right-width: 1px;
  border-right-style: solid;
  border-right-color: #ebebeb;
  justify-content: center;
  align-items: center;
  width: 95px;
}
.table_subdesc {
  padding-left: 32px;
  padding-bottom: 32px;
  display: flex;
  flex-direction: row;
  align-items: center;
}
</style>